<script setup>
import { ref, getCurrentInstance} from 'vue';
import { onUnload, onLoad } from '@dcloudio/uni-app';
import { uniFetch } from '../../api/uni-fetch';


const errorPopup = ref(null);
const deviceId = ref(null);
const timer1 = ref(null);
const statusText = ref('加载中');
const isLoading = ref(true);
// 导航栏
const paddingHeight = ref(0);
const navbarHeight = ref(0);
const lineHeight = ref(0);
const safeBottom = ref(0);

onLoad((device) => {
	console.log('device', device);
	if (device.code) {
		deviceId.value = device.code;
		getOpen(deviceId.value);
	}
});

async function getOpen(code) {
	console.log(1123123, code);
	console.log('code', decodeURIComponent(code), 'code');
	
	const res = await uniFetch.post('/supplier/create', {
		device: decodeURIComponent(code)
	});
	if (res.code === 10000) {
		isLoading.value = false;
		timer1.value = setTimeout(() => {
			uni.redirectTo({
				url: '/subpkg/replenishment/replenishment?id=' + res.data.id
			});
		}, 2000);
	} else {
		statusText.value = res.msg;
		errorPopup.value.open('center');
		timer1.value = setTimeout(() => {
			uni.switchTab({
				url: '/pages/index/index'
			});
		}, 2500);
	}
}

uni.getSystemInfo({
	success: function (res) {
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		paddingHeight.value = menuButtonInfo.top;
		navbarHeight.value = res.statusBarHeight;
		safeBottom.value = res.safeAreaInsets.bottom;
		lineHeight.value = res.statusBarHeight - (res.statusBarHeight - menuButtonInfo.height);
	},
	fail: (err) => {
		console.log(err);
	}
});

// 清除定时器
onUnload(() => {
	clearTimeout(timer1.value);
});
</script>

<template>
	<view>
		<cover-view
			class="navigationBarTitle"
			:style="{ paddingTop: paddingHeight + 'px', height: navbarHeight + 'px', lineHeight: lineHeight + 'px', fontSize: lineHeight - 12 + 'px' }"
		>
			授权使用
		</cover-view>
		<view class="open-door" :style="{ paddingTop: paddingHeight + lineHeight + navbarHeight + 'px' }">
			<view class="image" style="background-image: url(https://dmg.nex-i.cn/res/wx/pic1.png)"></view>
			<view class="welcome">欢迎使用</view>
			<view class="welcome-titile">智能售货机</view>
			<view style="height: 400rpx; padding: 100rpx">
				<LoadingUnit></LoadingUnit>
				<LoadingSuccess v-if="!isLoading">开门成功</LoadingSuccess>
			</view>
		</view>

		<uni-popup ref="errorPopup" type="center">
			<view class="error">
				<view class="bgc">
					<image src="/static/images/error.png" mode="widthFix"></image>
					<view class="text">{{ statusText }}</view>
				</view>
			</view>
		</uni-popup>
	</view>

	<ws-wx-privacy id="privacy-popup"></ws-wx-privacy>
</template>

<style lang="scss">
view {
	box-sizing: border-box;
}
.navigationBarTitle {
	position: fixed;
	top: 0;
	z-index: 999;
	// background-color: #ffffff11;
	// color: #fefefe;;
	background-color: #0f51cc;
	color: #fefefe;
	width: 100%;
	text-align: center;
	backdrop-filter: blur(5rpx);
	box-shadow: 0 10px 20px 0px rgba(184, 184, 184, 0.1);
}
.open-door {
	padding: 20rpx 20rpx 50rpx;
	height: 100vh;
	// background-image: url('/static/images/bgc1.png');
	background-size: 100%;
	background-repeat: no-repeat;
	background-color: #edf0f0;

	image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100%;
		display: block;
		margin: 0 auto 80rpx;
	}
	.image {
		width: 100%;
		height: 320rpx;
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: #edf0f0;
		border-radius: 30rpx;
	}
	.welcome {
		padding-top: 30rpx;
		color: #717171;
		// font-weight: 700;
		font-size: 40rpx;
		text-align: center;
		line-height: 75rpx;
	}
	.welcome-titile {
		// color: #fefefe;
		line-height: 75rpx;
		text-align: center;
		letter-spacing: 5rpx;
		font-size: 50rpx;
		font-weight: 700;
		color: #f08300;
	}
}

.error .bgc {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background-color: #000000ee;
	width: 350rpx;
	height: 350rpx;
	border-radius: 30rpx;
	image {
		width: 150rpx;
		height: 150rpx;
	}
	.text {
		padding-top: 30rpx;
		color: #fff;
		font-size: 35rpx;
		text-align: center;
	}
}

.login-form {
	position: relative;
	padding: 40rpx 30rpx 150rpx;
	background-color: #fefefe;
	border-radius: 40rpx 40rpx 0 0;
	.login-title {
		image {
			display: block;
			margin: 30rpx auto 30rpx;
			width: 130rpx;
			height: 130rpx;
			border-radius: 50%;
			vertical-align: middle;
		}
		.welcome {
			text-align: center;
			font-size: 40rpx;
			color: #000;
		}
		.tips {
			font-size: 25rpx;
			padding-top: 20rpx;
			text-align: center;
			color: rgba(107, 114, 128, 1);
		}
	}

	.login-button {
		.login {
			margin: 0rpx auto 50rpx;
			height: 48px;
			opacity: 1;
			border-radius: 6px;
			background: #32af5a;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 12px 18.13px 12px 17.88px;
			width: 400rpx;
			color: #fefefe;
		}
	}
}

.phone-form {
	position: relative;
	padding: 20rpx 60rpx 30rpx;
	background-color: #fefefe;
	border-radius: 40rpx;
	// background-color: pink;
	height: 50vh;
	.phone-title {
		margin-bottom: -40rpx;
		image {
			display: block;
			margin: 30rpx auto 30rpx;
			width: 130rpx;
			height: 130rpx;
			border-radius: 50%;
			vertical-align: middle;
		}
		.welcome {
			text-align: center;
			font-size: 40rpx;
			color: #000;
		}
		.tips {
			font-size: 25rpx;
			padding-top: 20rpx;
			text-align: center;
			color: rgba(107, 114, 128, 1);
		}
	}

	.phone-button {
		margin-top: -40rpx;
		.phone {
			margin: 10rpx 0 30rpx;
			height: 48px;
			border-radius: 6px;
			background: #32af5a;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 12px 18.13px 12px 17.88px;
			color: #fefefe;
		}
	}
}
</style>
